<template>
  <div class="reply-warp" id="reply-wrap">
    <div style="margin-bottom: 20px">
      <reply-box :type-id="typeId" :show="1"/>
    </div>
    <div v-if="commentList.length > 0">
      <div class="comments">
        <div  v-for="(item) in commentList">
<!--          顶层评论-->
          <comment-item :reply-id="item.id"
                        :id="'commentItem-' + item.id"
                        :key="item.id"
                        :comment-item="item"/>
        </div>
        <div v-if="more" @click="readMoreComment" class="more">
          <a-button type="primary">下一页</a-button>
        </div>
      </div>
    </div>
    <div v-else style="padding: 1.25rem; text-align: center">来发评论吧~</div>
  </div>
</template>

<script>
import ReplyBox from "../ReplyBox";
import CommentItem from "../CommentItem";
import * as api from "../../api/comment"
export default {
  name: "comments",
  components: {CommentItem, ReplyBox},
  data(){
    return{
      more:true,
      count: 24,
      reFresh: false,
      queryParams: {
        total:0,
        pageSize: 10,
        pageNum: 1,
        reasonable:false
      },
      commentList:[]
    }
  },
  props:{
    commentType: {
      type: Number,
      default:1
    },
    typeId:{
      type:String,
      default: ""
    }
  },
  computed:{
    isLike(id){
      return true;
    }
  },
  mounted() {
    this.$emitter.on("addComment",this.addComment)

  },
  beforeDestroy() {
    this.$emitter.off('addComment', this.addComment);
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
       const data = {
         commentType: this.commentType,
         typeId: this.typeId,
         seq: 1
       }
       this.more = false;
       try {
         const res = await api.getCommentList(data,this.queryParams);
         this.queryParams.total = res.data.total
         if (res.data != null && res.data.rows && res.data.rows.length > 0) {
           for (let i = 0; i < res.data.rows.length; i++) {
             this.commentList.push(res.data.rows[i])
           }
           this.more = true;
         }
         // this.reFresh = true;
       } catch (e) {
         this.more = true;
       } finally {

       }

     },
    readMoreComment() {
      this.queryParams.pageNum++;
      this.getList()
    },
    addComment(item) {
      if (item.parentId == null || item.parentId == 0) {
        this.commentList = [item, ...this.commentList]
      } else {
        this.commentList.forEach(data => {
          if (data.id == item.replyId) {
            if (data.children == null) {
              data.children = []
            }
            data.children.push(item)
          }
        })
      }
      this.$nextTick(() => {
        // 在下次 DOM 更新循环结束后执行的回调函数
        this.scrollToMiddle(item.id)
      });

    },
    scrollToMiddle(id) {
      const targetElement = document.getElementById(id);
      if (targetElement) {
        const elementRect = targetElement.getBoundingClientRect();
        const bodyRect = document.body.getBoundingClientRect();
        const offsetTop = elementRect.top - bodyRect.top;
        const offsetHeight = elementRect.height;
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;

        const scrollToPosition = offsetTop - (windowHeight - offsetHeight) / 2;

        window.scrollTo({
          top: scrollToPosition,
          behavior: 'smooth'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.reply-warp{
  .reply-title{
    display: flex;
    align-items: center;
    margin: 20px 0 0 0;
    font-size: 20px;
  }
  .comments{
    .more{
      display: flex;
      justify-content: flex-end;
    }
  }

}


</style>
